<template>
  <div class="app-container antifraud-propaganda">
    <!-- 上振人姓名、时间、社区筛选 -->
    <el-form
      :model="queryParams"
      ref="queryRef"
      v-show="showSearch"
      :inline="true"
      label-width="88px"
    >
      <el-form-item label="预约时间" prop="saveDate">
        <el-date-picker
          v-model="queryParams.saveDate"
          type="date"
          placeholder="请选择时间"
          clearable
          format="YYYY年MM月DD日"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="社区" prop="communityId">
        <el-select
          v-model="queryParams.communityId"
          clearable
          :empty-values="[null]"
          :value-on-clear="null"
          placeholder="请选择社区"
          style="width: 220px"
        >
          <el-option
            v-for="item in community_options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="姓名" prop="createBy">
        <el-input
          v-model="queryParams.createBy"
          placeholder="请输姓名"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="联系方式" prop="phonenumber">
        <el-input
          v-model="queryParams.phonenumber"
          placeholder="请输联系方式"
          clearable
          style="width: 240px"
        />
      </el-form-item>

      <el-form-item label="状态" prop="appointmentStatus">
        <el-select
          v-model="queryParams.appointmentStatus"
          clearable
          :empty-values="[null]"
          :value-on-clear="null"
          placeholder="请选择状态"
          style="width: 220px"
        >
          <el-option
            v-for="item in community_stust"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >查询</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="tableList" border>
      <el-table-column label="序号" type="index" align="center" width="70" />
      <el-table-column
        label="预约人"
        prop="createBy"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        label="联系方式"
        prop="phonenumber"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        label="所属社区"
        prop="communityName"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column label="预约时间" align="center">
        <template #default="scope">
          {{
            scope.row.subscribeTime +
            " " +
            scope.row.whatDay +
            " " +
            scope.row.timeFrame
          }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template #default="scope">
          {{
            scope.row.appointmentStatus == 0
              ? "取消"
              : scope.row.appointmentStatus == 1
              ? "预约"
              : scope.row.appointmentStatus == 2
              ? "进行中"
              : scope.row.appointmentStatus == 3
              ? "跟进"
              : scope.row.appointmentStatus == 4
              ? "完成"
              : scope.row.appointmentStatus == 5
              ? "过期"
              : "-"
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="180"
      >
        <template #default="scope">
          <el-button
            v-if="
              scope.row.appointmentStatus == 2 ||
              scope.row.appointmentStatus == 3
            "
            link
            type="primary"
            text
            @click="handleDelete(4, scope.row.id)"
            v-hasPermi="['antifraudPropaganda:detail']"
          >
            完成
          </el-button>
          <el-button
            v-if="scope.row.appointmentStatus == 2"
            link
            type="primary"
            text
            @click="handleDelete(3, scope.row.id)"
            v-hasPermi="['antifraudPropaganda:detail']"
          >
            跟进
          </el-button>
          <div
            v-if="
              scope.row.appointmentStatus != 2 &&
              scope.row.appointmentStatus != 3
            "
          >
            -
          </div>

          <!-- <el-button
            link
            type="primary"
            text
            @click="handleDetail(scope.row)"
            v-hasPermi="['antifraudPropaganda:detail']"
          >
            查询推送记录
          </el-button>
          <el-button
            link
            type="primary"
            text
            @click="handleDetail(scope.row)"
            v-hasPermi="['antifraudPropaganda:detail']"
          >
            查询推送记录
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <!-- <el-dialog
        :title="title"
        v-model="open"
        width="35vw"
        align-center
        append-to-body
      >
        <el-form
          ref="fireSafetyRef"
          :model="form"
          :rules="rules"
          label-width="80px"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="标题" prop="title" required>
                <el-input v-model="form.title" placeholder="请输入标题" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="图片">
                <image-upload
                  v-model="form.imgUrl"
                  :isShowTip="false"
                  :limit="1"
                />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="视频">
                <file-upload
                  v-model="form.videoUrl"
                  :isShowTip="false"
                  isVideo
                  :limit="1"
                  :fileType="[
                    'ogm',
                    'wmv',
                    'mpg',
                    'webm',
                    'ogv',
                    'mov',
                    'asx',
                    'mpeg',
                    'mp4',
                    'm4v',
                    'avi',
                  ]"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="内容" prop="content" required>
                <WangEditor v-if="open" v-model="form.content"></WangEditor>
              </el-form-item>
            </el-col>
            <span style="padding-left: 5rem; color: #909399"
              >温馨提示：便于在微信小程序上的最佳展示效果，推荐图片尺寸比例100%，位置居中。</span
            >
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">保 存</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog> -->

    <!-- 详情对话框 -->
    <!-- <el-dialog
      title="民警信息"
      v-model="openDetail"
      width="40vw"
      align-center
      append-to-body
    >
      <el-table :data="form" border>
        <el-table-column label="序号" type="index" align="center" width="70" />
        <el-table-column
          label="姓名"
          prop="userName"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          label="警号"
          prop="badgeNumber"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          label="是否已读"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            {{
              scope.row.readStatus == 0
                ? "未读"
                : scope.row.readStatus == 1
                ? "已读"
                : "-"
            }}
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">关 闭</el-button>
        </div>
      </template>
    </el-dialog> -->
  </div>
</template>

<script setup name="">
// const baseUrl = import.meta.env.VITE_APP_BASE_API;
import { getCommunity,reservationupdateStatus } from "@/api/community/community";
const community_options = ref([]);
const community_stust = ref([
  { label: "取消", id: 0 },
  { label: "预约", id: 1 },
  { label: "进行中", id: 2 },
  { label: "跟进", id: 3 },
  { label: "完成", id: 4 },
  { label: "过期", id: 5 },
]);
import {
  reservationationPCPageVo,
  // snapshotgetListPushVo,
} from "@/api/athand/index";
const tableList = ref([]);
const openDetail = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const total = ref(0);
const data = reactive({
  form: [],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    appointmentStatus: undefined,
    communityId: undefined,
    createBy: undefined,
    phonenumber: undefined,
    saveDate: undefined,
    // userName: undefined,
    // createTime: undefined,
    // communityId: undefined,
  },
  // rules: {
  //   title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
  //   content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
  // },
});

const { queryParams, form, rules } = toRefs(data);
const { proxy } = getCurrentInstance();
//   /** 查询角色列表 */
function getList() {
  loading.value = true;
  reservationationPCPageVo(queryParams.value).then((response) => {
    loading.value = false;
    const { data } = response;
    tableList.value = data.records ?? [];
    // total.value = data.total.map((e) => {
    //   e.imgUrl = e.imgUrl.split(",");
    //   return e;
    // });
    total.value = data.total;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

function getCommunityList() {
  getCommunity({}).then((response) => {
    const { data } = response;
    community_options.value = data;
    handleQuery();
  });
}
getCommunityList();

//   /** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

//   /** 取消按钮 */
//   function cancel() {
//     open.value = false;
//     reset();
//   }

/** 关闭按钮操作 */
function close() {
  openDetail.value = false;
  // reset();
  // if (videoRef.value) {
  //   videoRef.value.pause();
  //   videoRef.value = null;
  // }
}

function handleDelete(i, id) {
  proxy.$modal
    .confirm("确认进行" + (i == 4 ? "完成" : "跟进") + "操作？", "确认")
    .then(function () {
      reservationupdateStatus({id:id,appointmentStatus:i}).then(res=>{
        if(res.code == 200){
          proxy.$modal.msgSuccess("操作成功");
          getList();
        }
        // getList();
      })
      // return delAntifraudPropaganda(row.id);
    })
    // .then(() => {
    //   getList();
    //   proxy.$modal.msgSuccess("操作成功");
    // })
    .catch(() => {});
}

//   /** 表单重置 */
//   function reset() {
//     form.value = {
//       id: undefined,
//       title: undefined,
//       imgUrl: undefined,
//       videoUrl: undefined,
//       content: undefined,
//     };
//     proxy.resetForm("fireSafetyRef");
//   }

//   /** 新增按钮操作 */
//   function handleAdd() {
//     reset();
//     open.value = true;
//     title.value = "添加廉政漫画";
//   }

/** 查询按钮操作 */
// function handleDetail(row) {
//   snapshotgetListPushVo({ id: row.id }).then((response) => {
//     console.log(response);
//     form.value = response.data;
//     openDetail.value = true;
//   });
// }

//   /**修改按钮操作 */
//   function handleUpdate(row) {
//     reset();
//     integrityselectOne({ id: row.id, type: "admin" }).then((response) => {
//       form.value = response.data;
//       open.value = true;
//       title.value = "反诈宣传编辑";
//     });
//   }

//   /** 提交按钮 */
//   function submitForm() {
//     proxy.$refs["fireSafetyRef"].validate((valid) => {
//       if (valid) {
//         form.value.type = 3;
//         if (form.value.id != undefined) {
//           updateAntifraudPropaganda(form.value).then((response) => {
//             proxy.$modal.msgSuccess("修改成功");
//             open.value = false;
//             getList();
//           });
//         } else {
//           addAntifraudPropaganda(form.value).then((response) => {
//             proxy.$modal.msgSuccess("新增成功");
//             open.value = false;
//             getList();
//           });
//         }
//       }
//     });
//   }

//   /** 删除按钮操作 */
//   function handleDelete(row) {
//     proxy.$modal
//       .confirm("确认删除该数据", "删除确认")
//       .then(function () {
//         return delAntifraudPropaganda(row.id);
//       })
//       .then(() => {
//         getList();
//         proxy.$modal.msgSuccess("删除成功");
//       })
//       .catch(() => {});
//   }

//   getList();
</script>

<style lang="scss" scoped>
.antifraud-propaganda {
  :deep(.el-table td.el-table__cell div) {
    white-space: wrap;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
}
</style>

<style>
.rich-text-container {
  img {
    max-width: 25vw;
  }
}
</style>
